*{
   padding: 0; 
   margin: 0;
}
ul{
    list-style: none;
}


body{

    color: #ddd;
    font-size: 14px;
    // Arial, sans-serif 衬线字体 非衬线字体
    // http://www.sucaijishi.com/worth-62-239-1.html
    font-family: Microsoft YaHei,Helvetica Neue,Helvetica,STHeiTi, Arial, sans-serif;

}


/* rem 适配 */

$with:748px;
.app{
    margin: 0 auto;
    width: $with;
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 12px #000;

    h3{
        text-align: center;
        font-size: 21px;
        font-weight: 500;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       
    }
.banner{
    width: 698px;
    margin: 0px 25px 0px 25px;
    .image{
        width:100%;
        margin-top: 20px;

        img{
         width:100%;
        }
    }

}
    
    .clearfix{
        display: block;
        content: '';
        clear: both;
    }

    .lists{
        width: 658px;
        height: 100%;
        margin:30px 45px 0px 45px ;
        display: flex;
        justify-content: space-between;
        .listimg{
          
          
           

            img{
                width: 80px;
                height: 80px;
                border-radius: 51%;
            }

            p{
                text-align: center;
                font-size: 16px;
                font-weight: 500;
            }
        }
       
    }

.items{
    width: 658px;
        height: 100%;
        margin:30px 45px 0px 45px ;
        display: flex;
        justify-content: space-between;

        .iteming{

            img{
                width: 80px;
                height: 80px;
                border-radius: 51%;
            }

            p{
                text-align: center;
                font-size: 16px;
                font-weight: 500;
            }
        }

}


.pic{
    width: 698px;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 36px;
    img{
        width: 100%;
        border-radius: 66px;
    }
}

.hot{
    width: 698px;
    margin-top: 20px;
    margin-left: 25px;
    margin-right: 25px;
    .hotted{
        width: 100%;
        height: 36px;
        display: flex;
        line-height: 36px;
        .title{
            font-size: 21px;
            font-weight: 500;
            margin-right: 12px;
            /* 字体 在绝大部分情况下 我们去做网页的时候，不要使用特殊字体（并不能包装查看网页的用户的电脑里面安装了这种特殊字体），如果页面有一些效果的字体特殊，那么我们建议做成图片 */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        span{
           color: red;
           font-size: 16px;
           font-weight: 400;
        }
    }
    .box{
        margin-top: 10px;
        display: flex;
        .left{
            width: 298px;
           
            img{
                width: 100%;
                height: 300px;  
            }
        }

      .right{
          margin-left: 3px;
          width: 386px;
          .prev{
              width: 100%;
              img{
                width: 100%;
                height: 148px;
              }
          }
          .next{
            width: 100%;
            img{
              width: 100%;
              height: 148px;
            }
          }
      }  
    }

}

// 
.guess{
    width: 698px;
    margin-top: 30px;
    margin-left: 25px;
    margin-right: 25px;

    .guessed{
        width: 100%;
        height: 36px;
        line-height: 36px;
        display: flex;
        h2{
            font-size: 21px;
            font-weight: 500;
            margin-right: 12px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        
        }
        span{
            color: red;
            font-size: 16px;
            font-weight: 400;
        }
    }

    .miss{
        display: flex;
        justify-content: space-between;
        .small{
          
            margin-top: 10px;
            height: 390px;
            width: 345px;
            border: 1px solid rgb(198, 198, 198);
            
            .img{
                width: 345px;
               
                height:280px ;
    
                img{
                    width: 345px;
                    height:280px ;
                }
            }
    
    
            .kiss{
                margin-top: 3px;
                // height: 32px;
                margin-left: 5px;
                margin-right: 5px;
                // width: 283px;
                font-size: 21px;
                font-weight: 400;
               
            }
    
            p{
                margin-top: 12px;
                margin-left: 8px;
                color: red;
                font-size: 26px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-weight: 400;
            }
        }

     
    }
    
}
.footer{
    width: 746px;
    margin-top: 20px;
   border: 1px solid rgb(198, 198, 198);

    img{
     width:100%;
    }

   } 

}




    